<template>
	<view class="wrap" v-if="popup_show">
		<view class="popup-bg" :style="getHeight">
				<view class="update-wrap">
					<view class="content">
						<view class="title">发现新版本 </br> <text>V{{update_info.version}}</text> </view>
						<view class="title-sub" v-html="update_info.info"></view>
						<view class="btns" v-if="downstatus < 1">
							<button class="btn" @click="nowUpdate">
								立即升级
							</button>
							<button @click="close">
								稍后再说
							</button>
						</view>
						<view class="sche-wrap" v-else>
							<view class="sche-bg1">
								<view class="sche-bg-jindu1" :style="lengthWidth"></view>
							</view>
							<view class="sche-bg">
								<view class="sche-bg-jindu" :style="lengthWidth"></view>
							</view>
							<text class="down-text">
								下载进度:{{ (downSize / 1024 / 1024).toFixed(2) }}M/{{ (fileSize / 1024 / 1024).toFixed(2)}}M
							</text>
						</view>
					</view>	
				</view>
		</view>
	</view>
</template>

<script>
export default {
	computed:{
		getHeight() {
			let bottom = 0;
			const systemInfo = uni.getWindowInfo();
			return {
				bottom: bottom + "px",
				height: systemInfo.windowHeight + 'px',
			};
		},
		// 下载进度计算
		lengthWidth: function() {
			let w = (this.downSize / this.fileSize) * 100;
			if (!w) {
				w = 0;
			} else {
				w = w.toFixed(2);
			}
			return {
				width: w + "%", //return 宽度半分比
			};
		},
	},
	data(){
		return{
			appConfig:null,
			platform:"",
			version: "", //当前软件版本
			update_info: {
				os: "android", //设备系统
				version: "", //最新版本
				info: "", //升级说明
				url:"",//下载链接
			},
			need_update: false, // 是否更新
			popup_show: false, //弹窗是否显示
			fileSize: 0, //文件大小
			downSize: 0, //已下载大小
			downing: false, //是否下载中
			downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
			viewObj: null, //原生遮罩view
		}
	},
	mounted() {
		this.update();
	},
	methods:{
		update(){
			if(this.viewObj) {
				// #ifdef APP-PLUS
				this.viewObj.hide(); //隐藏原生遮罩
				// #endif
			}
			var that = this;
			const systemInfo = uni.getDeviceInfo();
			this.platform = systemInfo.platform;
			this.appConfig = uni.getStorageSync('appConfig')
			// #ifdef APP-PLUS
			uni.getNetworkType({
				success: res => {
					if (res.networkType != 'none') {
						plus.runtime.getProperty(plus.runtime.appid, function(inf) {
							that.version = inf.version;
							that.getUpdateInfo();
						});
					}
				}
			});
			// #endif
		},
		getUpdateInfo(){
			if(this.platform == 'android') {
				this.update_info = {
					os: this.platform, //设备系统
					version: this.appConfig.android_version, //最新版本
					info: this.appConfig.upgrade_desc, //升级说明
					url: this.appConfig.android_url,//下载链接 
				};
			} else {
				this.update_info = {
					os: this.platform, //设备系统
					version: this.appConfig.ios_version, //最新版本
					info: this.appConfig.upgrade_desc, //升级说明
					url: this.appConfig.ios_url,//下载链接 
				};
			}
			this.checkUpdate();
		},
		//检查更新APP
		checkUpdate(){
			this.need_update = this.update_info.version.replace(/\./g,'') > this.version.replace(/\./g,'');
			// console.log("是否需要更新",this.need_update);
			if(this.need_update){
				this.popup_show = true;
				// #ifdef APP-PLUS
				this.viewObj = new plus.nativeObj.View("viewObj", {
					bottom: "0px",
					left: "0px",
					height: "50px",
					width: "100%",
					backgroundColor: "rgba(0,0,0,.6)",
				});
				this.viewObj.show(); //显示原生遮罩
				// #endif
			}
		},
		//立即下载
		nowUpdate(){
			// #ifdef APP-PLUS
			var vm = this;
			if (this.downing) return false; //如果正在下载就停止操作
			this.downing = true;
			console.log(/\.wgt$/.test(vm.update_info.url))
			if (/\.apk$/.test(vm.update_info.url)) {
				// 如果是apk地址
				vm.download_wgt(); // 安装包/升级包更新
			} else if (/\.wgt$/.test(vm.update_info.url)) {
				// 如果是更新包
				vm.download_wgt(); // 安装包/升级包更新
			} else {
				this.closeUpdate()
				plus.runtime.openURL(vm.update_info.url, function() {
					//调用外部浏览器打开更新地址
					plus.nativeUI.toast("打开错误");
				});
			}
			// #endif
		},
		// 下载升级资源包
		download_wgt(){
			var vm=this;
			let options = {
				method: "get",
			};
			let dtask = plus.downloader.createDownload(
				vm.update_info.url,
				options,
				function(d, status) {}
			);
			dtask.addEventListener("statechanged", function(task, status) {
				if (status === null) {} else if (status == 200) {
					vm.downstatus = task.state;
					switch (task.state) {
						case 3: // 已接收到数据
							vm.downSize = task.downloadedSize;
							if (task.totalSize) {
								vm.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
							}
						break;
						case 4:
							vm.closeUpdate()
							vm.fileSize = 0;
							vm.downSize = 0;
							vm.downing = false;
							vm.downstatus = 0;
							// console.log(task.filename)
							vm.installWgt(task.filename); // 安装wgt包
						break;
					}
				} else {
					plus.nativeUI.closeWaiting();
					plus.nativeUI.toast("下载出错");
					vm.downing = false;
					vm.downstatus = 0;
				}
			});
			dtask.start();
		},
		// 安装文件
		installWgt(path) {
			this.closeUpdate()
			plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
			plus.runtime.install(
				path, {},
				function() {
					plus.nativeUI.closeWaiting();
				},
				function(e) {
					plus.nativeUI.closeWaiting();
					// 安装更新文件失败
					plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
				}
			);
		},
		closeUpdate() {
			this.popup_show = false;
			// #ifdef APP-PLUS
			this.viewObj.hide(); //隐藏原生遮罩
			// #endif
		},
		close() {
			this.popup_show = false;
			// #ifdef APP-PLUS
			this.viewObj.hide(); //隐藏原生遮罩
			// #endif
			this.$emit("close");
		}
	}
}	
</script>

<style lang="scss" scoped>
.wrap{
	.popup-bg{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0rpx;
		right: 0;
		width: 750rpx;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 10000;
		.popup-content{
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			width: 587rpx;
			height: 740rpx;
			&.popup-content-show{
				animation: mymove 500ms;
				transform: scale(1);
			}
			.top-img {
				position: absolute;
				left: 0;
				width: 587rpx;
				height: 740rpx;
				top: 0;
			}
			.update-wrap{
				position: relative;
				z-index: 9;
				width: 508rpx;
				height: calc(100% - 70rpx);
				border-radius: 18rpx;
				display: flex;
				flex-direction: column;
				// background-color: #ffffff;
				// padding: 170rpx 30rpx 0;
				margin-top: 60rpx;
				.content{
					height: 100%;
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-bottom: 20rpx;
					.title {
						font-size: 38rpx;
						font-weight: bold;
						color: #fff;
						width: 100%;
						height: 220rpx;
						padding-left: 48rpx;
						padding-top: 20rpx;
						text {
							font-size: 32rpx;
						}
					}
					.title-sub {
						// text-align: center;
						font-size: 26rpx;
						color: #666666;
						flex: 1;
						width: 100%;
						padding: 0 40rpx;
					}
					.btn {
						width: 290rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						font-size: 28rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 100px;
						background: linear-gradient(138deg, #88C6FF 0%, #2E7FDF 100%);
						margin-top: 20rpx;
					}
					.sche-wrap{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-end;
						padding: 10rpx 50rpx 0;
						.sche-wrap-text {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 20rpx;
						}
						.sche-bg {
							position: relative;
							background-color: #cccccc;
							height: 20rpx;
							border-radius: 100px;
							width: 480rpx;
							display: flex;
							align-items: center;
							.sche-bg-jindu {
								position: absolute;
								left: 0;
								top: 0;
								height: 20rpx;
								min-width: 40rpx;
								border-radius: 100px;
								background: url('/') #2E7FDF center right 4rpx no-repeat;
								background-size: 26rpx 26rpx;
							}
						}
						.sche-bg1 {
							position: relative;
							height: 60rpx;
							width: 480rpx;
							display: flex;
							align-items: center;
							.sche-bg-jindu1 {
								position: absolute;
								left: 0;
								top: 0;
								height: 60rpx;
								min-width: 40rpx;
								// background: url(/static/images/round.png) center right 4rpx no-repeat;
								background-size: 50rpx 50rpx;
							}
						}
						.down-text {
							font-size: 24rpx;
							color: #5674e5;
							margin-top: 16rpx;
						}
					}	
				}
			}
			.close-ioc{
				width: 70rpx;
				height: 70rpx;
				margin-top: 30rpx;
			}
		}
	}
}
@keyframes mymove {
	0% {
		transform: scale(0);
			/*开始为原始大小*/
	}

	100% {
		transform: scale(1);
	}
}
.btns {
	button {
		border: none; /*去掉边框*/
		background: transparent; /*去掉背景颜色*/
		padding: 0; /*去掉内边距*/
		margin: 0; /*去掉外边距*/
		cursor: pointer; /*改变鼠标指针*/
		outline: none; /*去掉聚焦时的边框*/
		&:nth-child(2) {
			color: #888888;
			width: 290rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 10rpx;
			&::after {
				border: none;
			}
		}
	}
}
</style>